<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 后台管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409EFF">
          <div><i class="el-icon-user-solid" /> 今日销售总额</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            1999.8
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-money"/> 今日订单总量</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            12
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-bank-card" /> 累计订单总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            263
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C">
          <div><i class="el-icon-s-shop" /> 本周销量最佳菜品</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            鱼香肉丝
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div style="width: 100% ; height: 400px" id="line"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
        <div style="width: 100% ; height: 400px" id="bar"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import TokenAxios from "@/http/TokenAxios";
//周订单金额的统计图
const option = {
  title:{
    text:'近一周订单金额的统计图',
    left: 'center'
  },
  tooltip:{
    trigger:'axis'
  },
  xAxis:{
    type:'category',
    data:[]
  },
  yAxis:{
    type: 'value'
  },
  series:[
    {
      data:[],
      type:'line',
      smooth:true
    }
  ]
}
//本周各菜系销量统计
const optionBar = {
  title:{
    text:'本周各菜系销量统计',
    left: 'center'
  },
  tooltip:{
    trigger:'axis'
  },
  xAxis:{
    type:'category',
    data:[]
  },
  yAxis:{
    type: 'value'
  },
  series:[
    {
      data:[],
      type:'bar',
      smooth:true
    }
  ]
}
  export default {
    name:"AdminIndex",
    data(){
      return{}
    },

    mounted() {
      let lineDom = document.getElementById('line')
      let lineChart = echarts.init(lineDom);


      let barDom = document.getElementById('bar')
      let barChart = echarts.init(barDom);


      TokenAxios.get('http://localhost:10021/orders/charts').then(res=>{
        optionBar.xAxis.data = res.data.data?.bar?.map(v => v.cuisine) || []
        optionBar.series[0].data = res.data.data?.bar?.map(v => v.value) || []
        barChart.setOption(optionBar)

        option.xAxis.data = res.data.data?.line?.map(v => v.date) || []
        option.series[0].data = res.data.data?.line?.map(v => v.value) || []
        lineChart.setOption(option)
      })
    },
    methods:{}
  }
</script>
